import {
  Desktop24Filled,
  IosArrowRtl24Regular,
  ChevronUpDown16Regular,
  Star12Filled,
  Options16Filled,
  ArrowCounterclockwise24Regular,
} from "@vicons/fluent";
import {
  NButton,
  NCard,
  NDivider,
  NDropdown,
  NGrid,
  NGridItem,
  NIcon,
  NSpace,
  NTab,
  NTabs,
} from "naive-ui";
import PageScroll from "@/components/pageScroll";

export default defineComponent({
  name: "PDetail",
  setup() {
    let options = [
      {
        label: "滨海湾金沙，新加坡",
        key: "marina bay sands",
        disabled: true,
      },
      {
        label: "布朗酒店，伦敦",
        key: "brown's hotel, london",
      },
      {
        label: "亚特兰蒂斯巴哈马，拿骚",
        key: "atlantis nahamas, nassau",
      },
      {
        label: "比佛利山庄酒店，洛杉矶",
        key: "the beverly hills hotel, los angeles",
      },
    ];
    let activeTab = ref('id1')
    let router = useRouter();
    return () => (
      <div class=" h-full flex flex-col relative">
        <NCard
          bordered={false}
          contentStyle={{
            padding: "4px 12px 8px 12px",
          }}
        >
          <NSpace align="center">
            <NButton
              text
              onClick={() => {
                router.go(-1);
              }}
              style={{
                transform: "translate(0px, 5px)",
              }}
            >
              {{
                icon: () => {
                  return (
                    <NIcon
                      size="25"
                      color="#FFCA28"
                      component={Desktop24Filled}
                    />
                  );
                },
              }}
            </NButton>
            <NButton
              text
              style={{
                transform: "translate(0px, 5px)",
              }}
            >
              {{
                icon: () => {
                  return <NIcon component={IosArrowRtl24Regular} />;
                },
              }}
            </NButton>
            <NDropdown trigger="click" options={options}>
              <NButton
                text
                style={{
                  transform: "translate(0px, 2px)",
                }}
              >
                电商APP4.2.0版本优化
                <NIcon size="18" component={ChevronUpDown16Regular} />
              </NButton>
            </NDropdown>

            <div class="mt-1">
              <NDivider vertical />
            </div>
            <NButton
              text
              style={{
                transform: "translate(0px, 5px)",
              }}
            >
              {{
                icon: () => {
                  return <NIcon color="#FFCA28" component={Star12Filled} />;
                },
              }}
            </NButton>
            <NButton
              text
              style={{
                transform: "translate(0px, 5px)",
              }}
            >
              {{
                icon: () => {
                  return <NIcon component={Options16Filled} />;
                },
              }}
            </NButton>
            <div class="mt-1">
              <NDivider vertical />
            </div>
            <NTabs v-model:value={activeTab.value}>
              <NTab name="id1">概览</NTab>
              <NTab name="id2">规划</NTab>
              <NTab name="id3">用户调研</NTab>
              <NTab name="id4">需求</NTab>
              <NTab name="id5">版本</NTab>
              <NTab name="id6">迭代</NTab>
              <NTab name="id7">用户反馈</NTab>
            </NTabs>
          </NSpace>
        </NCard>
        <div class="flex margin-t-10 flex-auto overflow-hidden">
          <PageScroll
            bgStyle={{
              background: "none",
            }}
          >
            <div class=" sticky top-0 z-10 ">
              <NCard
                bordered={false}
                contentStyle={{
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "8px 12px",
                  alignItems: "center",
                }}
              >
                <span class="text-xs">概述</span>
                <NButton strong secondary size="small">
                  <NIcon size="18" component={ArrowCounterclockwise24Regular} />
                  刷新
                </NButton>
              </NCard>
            </div>
            <div class="flex-auto flex flex-col margin-t-10">
              <NGrid xGap={10} yGap={10} cols={6}>
                <NGridItem span={3}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={3}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={4}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={2}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={2}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={4}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={6}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={3}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
                <NGridItem span={3}>
                  <NCard title="卡片" bordered={false}>
                    卡片内容
                  </NCard>
                </NGridItem>
              </NGrid>
            </div>
          </PageScroll>
        </div>
      </div>
    );
  },
});
